<template>
  <div>
    <el-row>
      <el-col>
        <div id="linear" :style="{width: '100%', height: '400px'}"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        msg: ''
      }
    },
    mounted() {
      this.drawLine();
    },
    methods: {
      drawLine() {
        // 基于准备好的dom，初始化echarts实例
        let linear = this.$echarts.init(document.getElementById('linear'));
        // 绘制图表
        linear.setOption(
          {
            tooltip: {
              trigger: 'axis'
            },
            toolbox: {
              show: true,
              feature: {
                saveAsImage: {}
              }
            },
            xAxis: {
              boundaryGap: false,
              data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
              axisLabel: {
                formatter: '第{value}次'
              }
            },
            yAxis: {
              type: 'value',
              axisLabel: {
                formatter: '{value} ms'
              }
            },
            series: [{
              type: 'line',
              name: 'Android（未缓存）',
              showAllSymbol: true,
              smooth: true,
              data: [1018, 955, 910, 1284, 1005, 1213, 1010, 884, 965, 1142],
              markLine: {
                data: [{
                  type: 'average',
                  name: '平均值'
                }]
              }
            }, {
              type: 'line',
              name: 'Android（缓存）',
              showAllSymbol: true,
              smooth: true,
              data: [739, 895, 455, 690, 964, 785, 958, 937, 702, 996],
              markLine: {
                data: [{
                  type: 'average',
                  name: '平均值'
                }]
              }
            }, {
              type: 'line',
              name: 'Ipod（未缓存）',
              showAllSymbol: true,
              smooth: true,
              markLine: {
                data: [{
                  type: 'average',
                  name: '平均值'
                }]
              },
              data: [632, 744, 596, 662, 798, 513, 704, 705, 765, 642]
            }]
          }
        );
      }
    }
  }
</script>

<style scoped>

</style>
